<!--
 * @Description:产品详情
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-17 9:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-07-05 15:58:42
-->
<template>
	<view class="product-details-container">
		<!-- 商品 -->

		<c-layout @contentScroll="scroll">
			<c-navigation-bar :isFixed="true" slot="head" title="" isRightIcon :navbarBgColor="navBgc">
				<view slot="rightIcon" class="slot-icon-box">
					<u-image width="72rpx" height="72rpx" @click="sharePopShow = true" shape="circle"
						:src="topImage.send"></u-image>
					<u-image width="72rpx" height="72rpx" @click="push('/pages/myCart/myCart')" shape="circle"
						:src="topImage.car"></u-image>
				</view>
			</c-navigation-bar>
			<view class="product-details-main"  v-if="shellDown" style="margin-top: 200rpx;">
				<u-empty :text="$t('product.soldOut')" mode="favor"></u-empty>
			</view>
			<view class="product-details-main" v-else>
				<!-- 轮播 -->
				<view class="banner-box">

					<u-swiper v-if="info.image"
						:list="info.swiperList.length ? info.swiperList : [{ image: $u.file.getMedieUrl(info.image) }]"
						:autoplay="false" @click="preview()" :circular="false"></u-swiper>
				</view>
				<!-- 商品详情信息 -->
				<view class="product-details-info">
					<!-- 第一列商品名数量价格 -->
					<view class="info">
						<view class="price">
							<view class="current-price">${{ publicJS.toFixed(product.price) }}</view>
							<view class="current-price"
								style="color: rgba(23, 23, 23, 1); font-family: PingFang SC; font-weight: 500; font-size: 28rpx;">
								{{`${$t('product.salesVolume')} ${ product.salesVolume}` }}
							</view>
						</view>
						<view class="name" style="">
							<u-read-more ref="uReadMore1" toggle show-height="66" text-indent='0'
								:shadow-style="shadowStyle" :close-text="$t('product.ExpansionDetail')"
								:open-text="$t('product.PutAway')">
								<rich-text :nodes="info.goodsName"></rich-text>
							</u-read-more>
							<view class="name">
								<!-- <h2>{{ info.goodsName }}</h2> -->
							</view>
							<view class="count">
								<!-- <text>Monthly sales{{ info.salesVolume }}</text> -->
							</view>
						</view>

						<!--  <view class="tags">
                            <view :class="`tag-item ${item.id==='2'?'link':''}`" v-for="item in infoTags"
                                  :key="item.id">
                                {{ item.lab }}
                                <u-icon v-if="item.id==='2'" name="arrow-right"></u-icon>
                            </view>
                        </view> -->
					</view>

					<!-- 商品规格 -->
					<!-- 		<view class="specification">
						<u-collapse>
							<u-collapse-item
								:title="`${$t('orderDetails.Total')} ${skuAttr.length} ${$t('product.SelectableSpecifications')}`"
								@change="handleOpenChange()"
								ref="skuAttrList"
							>
								<view class="select-box" v-for="(skuItem, index) in skuAttributes" :key="index">
									<h2>{{ skuItem.name }}</h2>
									<view class="box">
										<view
											class="type"
											:class="[skuItem.active2 === skuType.id ? 'active' : '', skuType.optional ? 'optional' : '']"
											v-for="skuType in skuItem.options"
											:key="skuType.id"
											@click="skuType.optional ? skuTypeClick(skuType, index) : ''"
										>
											{{ skuType.name }}
											<view class="oss" v-if="!skuType.optional">oos</view>
										</view>
									</view>
								</view>
								<view class="count" style="display: flex; justify-content: space-between; margin: 20px 0">
									<view class="">
										<text>residual inventory {{ goosTotalNum ? goosTotalNum : 0 }}</text>
									</view>
									<view class="numberBox">
										<u-number-box class="capsule" type="capsule" :min="1" v-model="shangpingshuliang" @change="numberBoxChange"></u-number-box>
									</view>
							
								</view>
							</u-collapse-item>
						</u-collapse>
					</view> -->

					<!-- 服务说明 -->
					<view class="specification" @click="severPopup = true">
						<view class="serverOpen">
							<image src="../../static/images/server/server.png" mode=""
								style="width: 48rpx; height: 48rpx"></image>
							<view class=" serveContent"
								style="color: rgba(23, 23, 23, 1); font-weight: 500; font-size: 28rpx">
								{{$t('product.salesServer')}}
							</view>
							<uni-icons type="forward" size="20" color="rgba(23, 23, 23, 1)"></uni-icons>
						</view>
					</view>

					<!-- 店铺 -->
					<view class="store">
						<view class="store-card" @click="goShopInfo">
							<view class="store-card">
								<!-- <image style="width: 112rpx; height: 112rpx; border-radius: 50%; margin-right: 20rpx" :src="$u.file.getMedieUrl(storeInfo.shopAvatarUrl)" mode="aspectFill"></image> -->
								<u-avatar size="112" :src='$u.file.getMedieUrl(storeInfo.shopAvatarUrl)'
									:show-level='true' :level-icon='cameraFill' mode="circle"></u-avatar>
								<view class="" style="margin-left: 16rpx;">
									<view style="
											color: #000;
											font-size: 14px;
											font-weight: bold;
											width: 100px;
											display: inline-block;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: normal;
											display: -webkit-box;
											-webkit-box-orient: vertical;
											-webkit-line-clamp: 1;
										">
										{{ storeInfo.shopName }}
									</view>
									<view class="shopRate">

										<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="28"
											:current="storeInfo.mark" :disabled="true"
											style="margin: 0 10rpx;"></u-rate>
										<view class="range">
											{{ `${publicJS.toFixed(storeInfo.mark ) ||0.00} ${$t('orderDetails.points')} `}}
										</view>
									</view>

									<view style="color: #ccc;">
										{{`${$t('product.shopFans')} ${ storeInfo.interestNum || 0} | ${$t('product.shopSalesVolume')} ${ storeInfo.shopSalesVolume || 0}` }}
									</view>

								</view>
							</view>

							<view class=""
								style="height: 58rpx; line-height: 58rpx; padding: 0 10px; background: rgba(252, 61, 92, 1); color: #fff; border-radius: 4px">
								{{ $t('storeManagement.enterShop') }}
							</view>
						</view>

					</view>

					<!-- 评论 -->
					<view class="reviews-box">
						<view class="box-border">
							<view class="" style="font-size: 35rpx;font-size: 600;">
								{{$t('shop.goodsAverageScore')}}
							</view>
							<view class="">
								<view class="range">
									{{ goodsAverageScore?goodsAverageScore.toFixed(2):'0.00'}}
									<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38"
										:current="goodsAverageScore" :disabled="true" style="margin: 0 10rpx;"></u-rate>
								</view>
								<!-- <view class="tips">
									{{$t('shop.mouthTips')}}
								</view> -->
								<!-- <view class="row">
									<view class="rowTitle">
										{{$t('shop.ProductExperience')}}
									</view>
									<view class="progress">
										<view class="progress-bar" :style="{'width':`${(shopScore.productScore/5)*100}%`}">
										</view>
									</view>
									<view class="rowRange">
										{{shopScore.productScore}}
									</view>
									<view class="rowMes">
										{{$t('shop.AbovePeers')}}{{shopScore.productScoreExceed}}%
									</view>
								</view>
								<view class="row">
									<view class="rowTitle">
										{{$t('shop.LogisticsExperience')}}
									</view>
									<view class="progress">
										<view class="progress-bar" :style="{'width':`${(shopScore.logisticsScore/5)*100}%`}">
										</view>
									</view>
									<view class="rowRange">
										{{shopScore.logisticsScore}}
									</view>
									<view class="rowMes">
										{{$t('shop.AbovePeers')}}{{shopScore.logisticsScoreExceed}}%
									</view>
								</view>
								<view class="row">
									<view class="rowTitle">
										{{$t('shop.After-salesExperience')}}
									</view>
									<view class="progress">
										<view class="progress-bar" :style="{'width':`${(shopScore.afterSaleScore/5)*100}%`}">
										</view>
									</view>
									<view class="rowRange">
										{{shopScore.afterSaleScore}}
									</view>
									<view class="rowMes">
										{{$t('shop.AbovePeers')}}{{shopScore.afterSaleScoreExceed}}%
									</view>
								</view>
								<view class="row">
									<view class="rowTitle">
										{{$t('shop.ConsultingExperience')}}
									</view>
									<view class="progress">
										<view class="progress-bar" :style="{'width':`${(shopScore.consultScore/5)*100}%`}">
										</view>
									</view>
									<view class="rowRange">
									{{shopScore.consultScore}}
									</view>
									<view class="rowMes">
										{{$t('shop.AbovePeers')}}{{shopScore.consultScoreExceed}}%
									</view>
								</view>		 -->
							</view>
						</view>
						<view class="title" @click.capture="openReview">
							{{ $t('product.comment') }}({{ commenTotal }})
							<image style="height: 20rpx; width: 20rpx" src="@/static/svg/right-arrows.svg"></image>
						</view>
						<view class="reviews-main">
							<reviewsCard :data="item" v-for="(item, index) in commentList" :key="item.id"
								v-show="index < 2">
							</reviewsCard>
						</view>
					</view>

					<!-- 商品描述 -->
					<view class="description">
						<view class="title-split">
							<view></view>
							<text class="titleTxet">{{ $t('product.description') }}</text>
							<view></view>
						</view>

						<u-read-more ref="uReadMore" toggle show-height="400"
							:close-text="$t('product.ExpansionDetail')" :open-text="$t('product.PutAway')">
							<rich-text :nodes="content"></rich-text>
						</u-read-more>
						<view class=""></view>
					</view>

					
				</view>
			</view>
			<view class="product-details-main">
				<view class="product-details-info">
					
					<view class="goods-box">
						<view class="title">
							{{ $t('product.recommendCommodities') }}
						</view>
						<view class="reviews-main">
							<productCard :details="{ ...item, h: 280 }" v-for="item in goodList" :key="item.id"
								@click="goProductDetail(item)"></productCard>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部操作 -->
			<notTabbar slot="footer" v-if="!shellDown">
				<view class="footer-handle">
					<view class="circle" @click="customerClick">
						<u-icon name="chat"></u-icon>
					</view>
					<view class="circle" @click="collectHandel()">
						<u-icon :name="info.collectStatus ? 'heart-fill' : 'heart'"></u-icon>
					</view>
					<u-button type="default" class="add" @click="openSpec('add')">
						{{ $t('product.AddToCart1') }}
					</u-button>
					<u-button type="default" @click="openSpec('buy')" class="blue">
						{{ $t('product.buyQuickly') }}
					</u-button>
				</view>
			</notTabbar>
		</c-layout>
		<!--        弹框-->
		<promptDialog ref="promptDialogs_cs"></promptDialog>
		<!-- 分享 -->
		<c-share v-model="sharePopShow" :data="shareData" :sendUserData="sendUserData"></c-share>

		<!-- 修改地址信息弹窗 -->
		<u-popup safe-area-inset-bottom border-radius="60" class="change-order-address"
			v-model="changeOrderAddressPopShow" mode="bottom">
			<view class="popup-main">
				<view class="header">
					<text>{{ $t('product.changeAddress') }}</text>
					<u-icon @click="popStatusChange(false)" name="close"></u-icon>
				</view>
				<!-- 选择地址 -->
				<view class="check-address">
					<view class="address-item" v-for="item in addressList" :key="item.id">
						<view @click="currentCheckChange(item)"
							:class="`check-icon ${currentAddress.id === item.id ? 'is-checked' : ''}`"></view>
						<view class="check-text" @click="currentCheckChange(item)">
							<view class="user-name">
								{{ item.userName }}
							</view>
							<view class="address">
								{{ item.address }}
							</view>
						</view>
					</view>
				</view>
				<button type="default" @click="changeAddress">{{ $t('system.affirm') }}</button>
			</view>
		</u-popup>

		<!--        评论列表-->
		<u-popup v-model="commenPopup" mode="bottom" border-radius="34" class="reviews-pop" closeable>
			<view class="" style="height: 800rpx">
				<view class="tabs">
					<view class="tabs_aside" :class="active === 2 ? 'active' : ''" @click="active = 2">
						{{ $t('storeManagement.all') }}
					</view>
					<view class="tabs_aside" :class="active === 0 ? 'active' : ''" @click="active = 0">
						{{ $t('product.goodReputation') }}
					</view>
					<view class="tabs_aside" :class="active === 1 ? 'active' : ''" @click="active = 1">
						{{ $t('product.negativeComment') }}
					</view>
				</view>
				<scroll-view :scroll-top="0" scroll-y="true" style="height: calc(100% - 40px); width: 100%">
					<view class="reviews-main reviews-main-popup" v-if="active === 2">
						<reviewsCard :data="item" v-for="(item, index) in commentList" :key="item.id"></reviewsCard>
					</view>
					<view class="reviews-main reviews-main-popup" v-if="active === 0">
						<reviewsCard :data="item" v-for="(item, index) in commentList_1" :key="item.id"></reviewsCard>
					</view>
					<view class="reviews-main reviews-main-popup" v-if="active === 1">
						<reviewsCard :data="item" v-for="(item, index) in commentList_2" :key="item.id"></reviewsCard>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 查看评论大图 -->
		<uni-popup ref="largenPopup" type="center">
			<image style="width: 578rpx; height: 578rpx; border-radius: 20rpx" :src="$u.file.getMedieUrl(largenImage)">
			</image>
		</uni-popup>

		<!-- 服务说明 -->
		<u-popup v-model="severPopup" mode="bottom" border-radius="34" class="reviews-pop" closeable>
			<view class="services" style="height: 1236rpx; padding: 64rpx 40rpx">
				<view class="serveTop"> {{$t('product.specification2')}}</view>
				<view class="severBox">
					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="#e6268a"></uni-icons>
						<view class="severName">{{$t('product.fastMoneyBack')}}</view>
					</view>
					<view class="severDetail">{{$t('product.refundServer')}}</view>
				</view>
				<view class="severBox">
					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="#e6268a"></uni-icons>
						<view class="severName">{{$t('product.reasonReturn')}}</view>
					</view>
					<view class="severDetail">{{$t('product.exchangeGoods')}}</view>
				</view>
				<view class="severBox">
					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="#e6268a"></uni-icons>
						<view class="severName">{{$t('product.insurance')}}</view>
					</view>
					<view class="severDetail">{{$t('product.certain')}}</view>
				</view>
				<view class="severBox">
					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="#e6268a"></uni-icons>
						<view class="severName">{{$t('product.door')}}</view>
					</view>
					<view class="severDetail">{{$t('product.appointment')}}</view>
				</view>
				<view class="severBox">
					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="#e6268a"></uni-icons>
						<view class="severName">{{$t('product.guaranteed')}}</view>
					</view>
					<view class="severDetail">{{$t('product.powder')}}</view>
				</view>
			</view>
		</u-popup>

		<!-- 商品规格-->
		<u-popup v-model="detailPopup" mode="bottom" border-radius="34" class="reviews-pop" closeable>
			<view class="detailPopup">
				<view class="productImage2">
					<view class="productImage3">
						<image class="" :src=" $u.file.getMedieUrl(currentAttr.image) " mode="aspectFill"></image>
					</view>
					<view class="priceOne">${{product.price}}</view>
					<view class="priceTwo" v-if="showPrice">{{`${$t('product.takeHomePrice')}$${ showPrice}` }}</view>
				</view>
				<view class="severMore">
					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="rgb(182, 182, 182)"></uni-icons>
						<view class="severName">{{$t('product.package')}}</view>
					</view>

					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="rgb(182, 182, 182)"></uni-icons>
						<view class="severName">{{$t('product.fastDelivery')}}</view>
					</view>

					<view class="severTittle">
						<uni-icons type="checkbox" size="20" color="rgb(182, 182, 182)"></uni-icons>
						<view class="severName">{{$t('product.fastMoneyBack')}}</view>
					</view>
				</view>

				<scroll-view :scroll-top="0" scroll-y="true" style="height: 550rpx; width: 100%">
					<view class="">
						<view class="select-box" v-for="(skuItem, index) in skuAttributes" :key="index">
							<h2>{{ skuItem.name }}</h2>
							<view class="box">
								<view class="type"
									:class="[skuItem.active2 === skuType.id ? 'active' : '', skuType.optional ? 'optional' : '']"
									v-for="skuType in skuItem.options" :key="skuType.id"
									@click="skuType.optional ? skuTypeClick(skuType, index) : ''">
									{{ skuType.name }}
									<view class="oss" v-if="!skuType.optional">oos</view>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
				<view class="footer" v-if="showPrice">
					<view class="count" style="display: flex; justify-content: space-between; margin: 20px 0">
						<view class="">
							<text> {{`${$t('product.residualInventory')} ${ goosTotalNum ? goosTotalNum : 0 }` }}</text>

						</view>
						<view class="numberBox">
							<u-number-box class="capsule" type="capsule" :min="1" :max="goosTotalNum"
								v-model="shangpingshuliang" @change="numberBoxChange"></u-number-box>
						</view>
					</view>
					<view>
						<u-button v-if="buyType=='buy'" type="default" @click="buyQuickly" class="blue"
							style="width: 670rpx; height: 120rpx; border-radius: 16rpx; background: rgba(41, 52, 208, 1)">
							{{ $t('product.buyQuickly') }}
						</u-button>
						<u-button v-else type="default" @click="addCar" class="blue"
							style="width: 670rpx; height: 120rpx; border-radius: 16rpx; background: rgba(41, 52, 208, 1)">
							{{ $t('product.AddToCart1') }}
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 客服弹窗 -->
		<u-popup v-model="customerServiceShow" mode="bottom" border-radius="14" height="520rpx">
			<view class="customerServiceBox">
				<view class="" style="width: 100%;height: 40rpx;text-align: center;">
					{{$t('user.customerService')}}
				</view>
				<view class=""
					style="width: 100%;height: 80rpx;text-align: center;margin: 40rpx 0;font-size: 12px;color: #ccc;">
					<p> {{$t('user.customerServiceTips1')}}</p>
					<p> {{$t('user.customerServiceTips2')}}</p>
				</view>
				<view class="" style="display: flex; justify-content: space-around;">
					<view class="" @click="publicJS.noOpen(()=>toCustomer(urlList[0]))">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs2.png')" />
						</view>
						<view class="">
							Support
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[1])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs3.png')" />
						</view>
						<view class="">
							Telegram
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[2])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs1.png')" />
						</view>
						<view class="">
							WhatsApp
						</view>
					</view>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
	export default {
		data() {
			return {
				cameraFill: require('static/images/icon-avator-home.png'),
				currentAttr: {},
				buyType: '',
				largenImage: '',
				detailPopup: false,
				severPopup: false,
				shangpingshuliang: 1,
				availableNum: 0,
				content: '',
				// 当前选中地址id
				currentAddress: {},
				defaulAddress: {},
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				// 商品信息
				info: {
					shangpingming: 'Roller Rabbit',
					mingxiamiaoshu: 'Vado Odelle Dress',

					shangpingjiage: 1479,
					yuanjia: 3699,
					xiaoshoue: '300+',
					miaoshu: 'A roomy backpack from the specialists in everyday bags at Herschel Supply Co., featuring resilient canvas and a light-blue patina that feels just right for summer.',
					发货信息: 'Ship to Birmingham College of Art 3 Margaret St, Birmingham B3',
					参数: 'Brand / Applicable age',
					color: [{
							val: '粉色',
							color: 'pink',
							id: 'pink'
						},
						{
							val: '白色',
							color: 'while',
							id: 'while'
						},
						{
							val: '绿色',
							color: 'green',
							id: 'green'
						},
						{
							val: '黑色',
							color: 'black',
							id: 'black'
						}
					],
					size: [{
							val: 'S',
							id: 'S'
						},
						{
							val: 'M',
							id: 'M'
						},
						{
							val: 'L',
							id: 'L'
						},
						{
							val: 'XL',
							id: 'XL'
						},
						{
							val: 'XXL',
							id: 'XXL'
						}
					],
					cColor: '',
					cSize: '',
					cCoupon: '',
					cNumber: 1
				},

				// 优惠券列表
				discountCouponList: [{
						amount: '50',
						des: 'Special coupon for shoes',
						id: 1
					},
					{
						amount: '100',
						des: 'Special coupon for shoes',
						id: 2
					}
				],
				// 标签信息
				infoTags: [{
						lab: '30 for every 300 sto',
						id: '0'
					},
					{
						lab: 'Gold coin',
						id: '1'
					},
					{
						lab: 'Collect coupons ',
						id: '2'
					}
				],
				// 店铺信息
				storeInfo: {},
				// 评论列表
				commenTotal: 0,
				// 评论列表
				commentList: [],
				commentList_1: [],
				commentList_2: [],
				active: 2,
				commenPopup: false,
				goodList: [{
						img: '../../static/images/home/good-1.png',
						name: 'Jack & Jones',
						price: '764',
						unit: '$'
					},
					{
						img: '../../static/images/home/good-2.png',
						name: 'Mango Carlo',
						price: '1269',
						unit: '$'
					},
					{
						img: '../../static/images/home/good-2.png',
						name: 'Pepe Jeans',
						price: '1269',
						unit: '$'
					}
				],
				// 好友列表
				friendList: [],
				// 分段器
				subsectionList: [{
						name: 'All'
					},
					{
						name: 'Well reviews'
					},
					{
						name: 'Negative'
					}
				],
				imageList: [
					require('@/static/images/home/good-1.png'),
					require('static/images/home/good-2.png'),
					require('static/images/home/girl.png'),
					require('static/images/home/good-2.png')
				],
				// 导航栏背景颜色
				navBgc: 'transparent',
				// 分享弹窗状态
				sharePopShow: false,
				// 选择规格
				checkSpecificationPop: false,
				// 评论
				reviewsPop: false,
				followUrlData: {},
				topImage: {
					send: require('@/static/images/send.png'),
					car: require('@/static/images/car.png')
				},
				skuAttributes: [],
				skuAttr: '',
				group: {},
				showPrice: '',
				goodsSku: '',
				goosTotalNum: '',
				product: {
					price: 0,
					originalPrice: 0,
					salesVolume: 0
				},
				changeOrderAddressPopShow: false,
				addressList: [],
				paging: {
					size: 20,
					current: 1
				},
				taskId: null,
				goodsAverageScore: null, //商品平均分

				// 客服弹窗
				customerServiceShow: false,
				urlList: ['https://www.baidu.com/', 'www.baidu.com', 'www.baidu.com'],
				shellDown:false,//是否下架
			};
		},
		onLoad(val) {
			this.followUrlData = val;
			this.taskId = val.taskId;

			this.getProducReview(this.paging);
			this.getFriendsAjax();
			this.getProductDetails(this.followUrlData.productId);
			//获取推荐
			this.$u.get(`/app/shopGoodsInfo/productRecommended`).then((res) => {
				this.goodList = res.data;
			});


			this.$u.post('/app/h2-sys-config/getConfigServiceAddress').then((res) => {
				this.urlList = res.data
			});
		},
		computed: {
			shareData() {
				return {
					url: '/pages/productDetails/productDetails?productId=' + this.followUrlData.productId
				};
			},
			// 分享点击发送的数据
			sendUserData() {
				const {
					info
				} = this
				// 传递的数据及类型，商品名，描述，图片
				return {
					data: {
						goodsName: info.goodsName,
						goodsDesc: this.content,
						swiperList: info.swiperList,
						image: info.image
					},
					type: 'goods'
				}
			}
		},

		methods: {

			openSpec(type) {
				this.buyType = type
				this.detailPopup = true
			},
			largen(url) {
				this.largenImage = url;
				// this.$refs.largenPopup.open()
				console.log(url);
				uni.previewImage({
					urls: [this.$u.file.getMedieUrl(this.largenImage)] // 需要预览的图片链接列表
				});
			},
			goShopInfo() {
				this.$u.route('/pages/shop/index', {
					shopId: this.storeInfo.id
				});

				//浏览店铺
				this.$u.post(`/app/shop/browseShop/${this.storeInfo.id}`).then((res) => {});
			},
			preview(index) {
				// 调用uni.previewImage()方法,传递index
				uni.previewImage({
					current: index,
					// 返回所有图片的url地址数组
					urls: this.info.swiperList.length ? this.info.swiperList.map((item) => item.image) : [this.$u
						.file
						.getMedieUrl(this.info.image)
					]
				});
			},
			back() {
				uni.navigateBack(1);
			},
			// 步进器值修改
			numberBoxChange(val) {},
			// 跳转
			push(url) {
				uni.navigateTo({
					url
				});
			},
			// 尺寸修改
			specificationChange(key, val) {
				if (this.info[key] === val) {
					return;
				} else {
					this.info[key] = val;
				}
			},
			valChange() {},
			// 优惠券选择
			radioGroupChange() {},
			radioChange() {},
			// 现在购买
			buyQuickly() {
				this.submitOrder();
			},
			// 获取好友
			getFriendsAjax() {},
			handleOpenChange() {
				//根据文档使用$nextTick，获取高度无效，试用setTimeout
				setTimeout(() => {
					this.$refs.skuAttrList.queryRect();
				}, 20);
			},


			//滚动到某个目标节点位置
			roll() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#rollBlock')
					.boundingClientRect((data) => {
						// console.log(data.top,uni.pageScrollTo)
						// uni.pageScrollTo({
						//     duration: 100,//过渡时间
						//     scrollTop: data.top,//到达目标class的top值
						// })
					})
					.exec();
			},
			// 判断参数
			submitOrder() {
				let that = this;
				//判断
				if (!this.goodsSku) {
					this.$u.toast(this.$t('product.selectSpecifications'));
					return;
				}
				if (this.shangpingshuliang > this.goosTotalNum || this.goosTotalNum == 0) {
					this.$u.toast(this.$t('product.StockEmergency'));
					return;
				}

				this.submits()
				// this.$u.api.verifyIsSetPwdAjax(0).then((res) => {
				// 	if (!res) {
				// 		this.$refs.promptDialogs_cs.show({
				// 			confirm: (close) => {
				// 				close();
				// 				this.$u.route('pages/modify/modify?type=1&set=0');
				// 			},
				// 			icon: 'errorTip',
				// 			btnColor: '#2934d0', //按钮颜色
				// 			btnTextType: 'Get a certificate', // 按钮文字
				// 			des: this.$t('product.PleaseSet'),
				// 			btnText: this.$t('product.GoToAdd')
				// 		});

				// 		return false;
				// 	} else {
				// 		that.successPass();
				// 	}
				// });
			},
			//通过判断验证
			successPass() {
				// //直接冲地址页过来直接购买从缓存取数据
				// if (JSON.stringify(this.vuex_address_info) != "{}") {
				//     //定义传参对象
				//     let obj = {}
				//     this.vuex_address_info.consigUser = this.vuex_address_info.receiveUserName
				//     this.vuex_address_info.addressId = this.vuex_address_info.addressId
				//     obj = this.vuex_address_info
				//     this.submits(obj)
				// } else {
				//址获取地址
				this.$u
					.post('/app/user/address/page', {
						pageSize: 10000,
						pageNum: 1
					})
					.then((res) => {
						this.detailPopup = false;
						//没有地址则去新建地址
						if (res.data.records.length <= 0) {
							this.$refs.promptDialogs_cs.show({
								confirm: (close) => {
									close();
									this.$u.route('/pages/addAddress/addAddress');
								},
								icon: 'errorTip',
								btnColor: '#2934d0', //按钮颜色
								btnTextType: 'Get a certificate', // 按钮文字
								des: this.$t('product.addressError'),
								btnText: this.$t('product.GoToAdd')
							});
						} else {
							//有地址则选取地址
							this.addressList = res.data.records;
							this.defaulAddress = this.addressList.find((e) => e.defaultAddress) || this.addressList[0];
							this.popStatusChange(true);
						}
					});
				// }
			},

			//提交订单
			submits() {
				let obj = {}
				obj.skuId = this.goodsSku;
				obj.num = this.shangpingshuliang;
				obj.taskId = this.taskId;
				let array = [];
				this.info.price = this.product.price;
				this.info.shopName = this.storeInfo.shopName;
				this.info.originalPrice = this.product.originalPrice;
				array.push(this.info);
				this.$u.vuex('vuex_shoping_cart', array);
				console.log(9999, this.info);
				// 生成订单
				this.$u.post('/app/shopOrderInfo/addone', obj).then((res) => {
					this.$u.vuex('vuex_shop_order_info', res.data);
					this.$u.vuex('vuex_shoping_cartList', res.data);
					this.detailPopup = false
					this.$nextTick(() => {
						this.$u.route('/pages/orderDetails/orderDetails', {
							type: 'product',
							orderId: res.data.orderInfo.id,
							moneys: res.data.orderInfo.moneys,
							num: this.shangpingshuliang,
							totalPostage: res.data.orderInfo.totalPostage,
							createTime: res.data.orderInfo.createTime
						});
					});
				});
			},
			scroll({
				detail: e
			}) {
				if (e.scrollTop > 255 + statusBarHeight) {
					this.navBgc = '#fff';
					this.topImage.send = require('@/static/images/send1.png');
					this.topImage.car = require('@/static/images/car1.png');
				} else {
					this.navBgc = 'transparent';
					this.topImage.send = require('@/static/images/send.png');
					this.topImage.car = require('@/static/images/car.png');
				}
			},
			//展开评论列表
			openReview() {
				// uni.navigateTo({
				//     url: '/pages/commentDetails/commentDetails',
				//     "animationType": "slide-in-bottom",
				//     "animationDuration": 300
				// })
				this.commenPopup = true;
			},
			// 获取评论
			getProducReview(paging) {
				this.paging.goodsId = this.followUrlData.productId;
				this.paging.size = 9999;

				this.$u.post('/app/shopOrderComment/page', paging).then((res) => {
					this.goodsAverageScore = Number(res.data.countId)
					this.commentList = res.data.records;
					this.commentList.forEach((i) => {
						if (i.rating == 1) {
							this.commentList_1.push(i);
						} else {
							this.commentList_2.push(i);
						}
					});
					this.commenTotal = res.data.total;
				});
			},
			//获取产品详情
			getProductDetails(id) {
				this.$u.get('/app/shopGoodsInfo/product/' + id).then((res) => {				
					if(!res.data.goodsInfo.status){
						this.shellDown=true
						return					
					}else{
						this.shellDown=false
					}
					// if (!res.data.goodsInfo.status) {
					// 	this.$refs.promptDialogs_cs.show({
					// 		confirm: (close) => {
					// 			close();
					// 		},
					// 		close: () => {
					// 			this.publicJS.backOption()
					// 		},
					// 		icon: 'errorTip',
					// 		btnColor: '#2934d0', //按钮颜色
					// 		des: this.$t('product.soldOut'),
					// 		btnText: this.$t('product.return')
					// 	});
					// }
					
					let swiperList = res.data.goodsInfo.images ? res.data.goodsInfo.images.split(',') : [];
					let newarr = [];
					swiperList.forEach((i) => {
						newarr.push({
							image: this.$u.file.getMedieUrl(i)
						});
					});
					this.currentAttr = res.data.goodsInfo
					console.log(1212, this.currentAttr);
					//商品信息
					this.info = {
						...res.data.goodsInfo,
						swiperList: newarr,
						collectStatus: res.data.collectStatus
					};
					console.log(5656, this.info);
					this.content = res.data.goodsInfo.goodsDesc;
					this.$nextTick(() => {
						this.$refs.uReadMore1.init();
						this.$refs.uReadMore.init();
					});
					this.product.price = this.info.price;
					this.product.originalPrice = this.info.originalPrice;
					this.product.salesVolume = this.info.salesVolume || 0
					//sku属性
					this.skuAttributes = res.data.skuAttributes.map((e) => ({
						...e,
						active2: ''
					}));


					this.skuAttr = res.data.goodsSkus;
					this.group = {};
					this.getStoreInfo(this.info.shopId);
					this.skuAttr.forEach((i) => {
						console.log(JSON.parse(i.skuAttr));
						let obj = JSON.parse(i.skuAttr);
						if (i.availableNum == 0) {
							return false
						}
						for (var o in obj) {

							this.skuAttributes.forEach((k) => {
								k.options.forEach((j) => {
									if ((j.attrId == o) & (j.id == obj[o])) {
										j.optional = true;
									}
								});
							});
							console.log('键名：', o);
							console.log('键值：', obj[o]);
						}
					});

					console.log(this.skuAttributes);
				});
			},
			//获取店铺信息
			getStoreInfo(id) {
				// this.storeInfo
				this.$u.get('/app/shop/get/' + id).then((r) => {
					this.storeInfo = r.data;
					this.$u.get('/app/shop-level/' + r.data.shopLevelId).then((res) => {
						this.cameraFill = this.$u.file.getMedieUrl(res.data.icon)
					});
					this.$u.get('/app/anchor/sell/task/all').then((res) => {
						this.storeInfo.shopLevelName = res.data.find((f) => f.level == r.data.shopLevelId)
							.name;
					});
				});
			},
			//判断sku是否有值
			skuTypeClick(op, index) {
				if (this.skuAttributes[index].active2 === op.id) {
					this.skuAttributes[index].active2 = '';
					delete this.group[op.attrId];
					delete this.info['selectDetail'];
				} else {
					this.group[op.attrId] = Number(op.id);
					this.skuAttributes[index].active2 = op.id;

					this.info['selectDetail'] += `${this.skuAttributes[index].name}:${op.name},`;
				}
				if (Object.keys(this.group).length === this.skuAttributes.length) {
					let newArr = [];
					newArr = this.skuAttr.filter((item) => {
						return Object.entries(JSON.parse(item.skuAttr)).toString() === Object.entries(this.group)
							.toString() &&
							item.availableNum != 0;
					});
					if (newArr.length) {
						let item = newArr[0];
						this.currentAttr = newArr[0] //选中规格参数、

						// if(	!this.currentAttr.image|| !(this.currentAttr.image.endsWith('.png') || this.currentAttr.image.endsWith('.jpg'))){
						//如果有规格图片则显示没有则显示商品图
						if (!this.currentAttr.image) {
							this.currentAttr.image = this.info.image

						} else {
							console.log(this.currentAttr.image);
						}

						this.showPrice = item.price.toFixed(2);
						this.goodsSku = item.id;
						this.goosTotalNum = item.availableNum;
						this.availableNum = item.availableNum;
						this.product.originalPrice = item.originalPrice;
						this.info['selPrice'] = this.showPrice;
						this.info['goodsSku'] = this.goodsSku;
					} else {
						console.log(newArr, this.group);
						this.showPrice = 0;
						this.$u.toast('out of store');
						this.skuAttributes[index].active2 = '';
						this.goodsSku = '';
						this.goosTotalNum = '';
						this.availableNum = 0;
						this.product.price = this.info.price;
						this.product.originalPrice = this.info.originalPrice;
					}
				}
			},
			//添加至购物车
			addCar() {
				if (!this.goodsSku) {
					this.$u.toast(this.$t('product.selectSpecifications'));
					return;
				}
				if (this.shangpingshuliang > this.goosTotalNum || this.goosTotalNum == 0) {
					this.$u.toast(this.$t('product.StockEmergency'));
					return;
				}
				let obj = {
					skuId: this.goodsSku,
					num: this.shangpingshuliang,
					taskId: this.taskId
				};

				this.$u.post('/app/cart/add', obj).then((res) => {
					this.$u.toast(this.$t('product.AddedToCart1'));
					this.detailPopup = false
				});
			},
			// 点击收藏按钮进行的操作
			collectHandel() {
				this.info.collectStatus ? this.collectCanceGoodsAjax(this.info.id) : this.collectGoodsAjax(this.info
					.shopId, this
					.info.id);
			},
			customerClick() {
				// this.$u.toast('敬请期待')
				this.customerServiceShow=true
			},
			// 店铺id ， 商品id 收藏
			collectGoodsAjax(shopId, id) {
				this.$u.post('/app/shop/interestShopGoods/' + shopId + `/${id}`).then((res) => {
					this.$u.toast(this.$t('product.SuccessfulCollection'));
					this.$set(this.info, 'collectStatus', true);
				});
			},
			// 商品id 取消收藏
			collectCanceGoodsAjax(shopGoodsId) {
				this.$u.post('/app/shop/interestShopGoodsCancel/' + shopGoodsId).then((res) => {
					this.$u.toast(this.$t('product.UncollectSuccessfully'));
					this.$set(this.info, 'collectStatus', false);
				});
			},
			// 弹出层状态修改

			popStatusChange(status) {
				this.changeOrderAddressPopShow = status;
				this.currentAddress = this.defaulAddress;
			},
			// 确认
			// changeAddress() {
			// 	this.changeOrderAddressPopShow = false;
			// 	this.defaulAddress = this.currentAddress;
			// 	let obj = {};
			// 	obj = this.defaulAddress;
			// 	obj.consigUser = this.defaulAddress.userName;
			// 	obj.addressId = this.defaulAddress.id;
			// 	this.$u.vuex('vuex_address_info', obj);
			// 	this.submits(obj);
			// },
			// 修改选中
			currentCheckChange(item) {
				if (this.currentAddress.id !== item.id) {
					this.currentAddress = item;
				} else {
					return;
				}
			},
			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				});
			},

			// 客服外链
			toCustomer(url) {
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)

				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.product-details-container {
		font-family: PingFang SC;
	}

	/deep/.u-drawer[data-v-52d4ddd1] {
		z-index: 99 !important;
	}

	/deep/ .u-avatar__level {
		.u-icon__img {
			width: 26px !important;
		}
	}

	.tag-item {
		font-size: 20rpx;
		background-color: #f6f9fa;
		text-align: center;
		line-height: 40rpx;
		border-radius: 20rpx;

		.link {
			color: #2934d0;
		}
	}

	.price {
		display: flex;
		justify-content: space-between;

		.current-price {
			color: rgba(252, 61, 92, 1);
			font-family: PingFangSC-Heavy;
			font-weight: bold;
			font-size: 50rpx;
			height: 100rpx;
			line-height: 100rpx;
		}

		.original-cost {
			color: #91909a;
			font-size: 26rpx;
			font-weight: 400;
			text-decoration: line-through;
			padding-left: 12rpx;
		}

		.discount {
			color: #f26163;
			font-size: 28rpx;
			padding-left: 4rpx;
		}
	}

	/deep/ .nav-search {
		.switch-svg {
			width: fit-content !important;
		}
	}

	/deep/ .c-navigation-bar {
		z-index: 999;
	}

	/deep/ .u-numberbox {
		display: inline-flex;
		align-items: center;
		height: 24px;
		box-sizing: border-box;
	}

	/deep/.u-numberbox.capsule .u-icon-minus {
		width: 24px;
		height: 24px !important;
		color: #fff !important;
		border-radius: 50%;
		background-color: #ccc !important;
	}

	/deep/.u-numberbox.capsule .u-icon-plus.u-icon-plus {
		width: 24px;
		height: 24px !important;
		color: #fff !important;
		border-radius: 50%;
		background-color: #000 !important;
	}

	/deep/ .u-numberbox.capsule .u-number-input {
		width: 45px !important;
		height: 24px !important;
		background-color: #fff !important;
	}

	.slot-icon-box {
		display: flex;
		height: 100%;
		align-items: center;
		margin-right: 45rpx;

		.u-image {
			&:nth-child(1) {
				margin-right: 20rpx;
			}
		}
	}

	// 底部操作栏
	.footer-handle {
		padding: 0rpx 42rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.circle {
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
			background-color: #22287c;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 36rpx;
		}

		button {
			font-weight: normal;
			height: 86rpx;
			line-height: 86rpx;
			width: 217rpx;

			&.add:not(.button-hover) {
				background-color: #323755;
				color: #dedede;
			}

			margin: 0;
			padding: 0;
			font-size: 32rpx;
		}
	}

	.product-details-container {
		height: 100vh;
		position: relative;

		.product-details-header {
			width: 100vw;
			position: fixed;
			top: 0;
			z-index: 100;

			.header-handle {
				padding: 0 45rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 36rpx;
			}
		}

		.product-details-main {
			// flex: auto;
			// height: 0;
			position: relative;

			.banner-box {
				/deep/ .u-swiper-wrap {
					uni-swiper {
						height: 646rpx !important;
					}

					.u-swiper-indicator {
						bottom: 46rpx !important;

						.u-indicator-item-round {
							background-color: #fff;
							margin: 0 14rpx;

							.u-indicator-item-round-active {
								position: relative;
								width: 14rpx;

								&::after {
									position: absolute;
									content: '';
									padding: 8rpx;
									width: 100%;
									height: 100%;
									border: 2rpx solid #fff;
									border-radius: 50%;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}
				}
			}

			.product-details-info {
				background-color: #fff;
				border-radius: 60rpx;
				padding: 56rpx 50rpx 200rpx;
				min-height: 824rpx;

				.info {
					padding-bottom: 38rpx;
					border-bottom: 2rpx solid #f2f3f5;

					/deep/ .u-content {
						font-size: 36rpx;
						font-weight: 500;
						color: #000;
						margin-bottom: 10rpx;

						text {
							color: #666666;
							font-size: 22rpx;
						}
					}

					view {


						.numberBox {
							margin-bottom: 12rpx;
							display: flex;
							justify-content: flex-end;
						}

						.count {
							text {
								font-size: 22rpx;
							}
						}

						.tags {
							display: flex;
							justify-content: space-between;
							margin-top: 28rpx;

							view {
								width: calc((100% - 20rpx) / 3);
							}
						}
					}
				}

				view {
					.title {
						display: flex;
						justify-content: space-between;
						color: #000;
						font-size: 32rpx;
						line-height: 48rpx;
						margin: 40rpx 0;
					}

					.des-box {
						color: #666666;
						font-size: 22rpx;
					}
				}

				.description {
					text {
						font-size: 22rpx;
						color: #666;
						line-height: 34rpx;
					}
				}

				.specification,
				.parameter {
					border-bottom: 2rpx solid #dddddd;
					border-bottom: 2rpx solid #f2f3f5;
					border-radius: 8rpx;
					padding: 32rpx;
					background: rgba(242, 242, 242, 1);
					border-bottom: 2rpx solid #f2f3f5;

					.select-size-color {
						display: flex;
						justify-content: space-between;

						view {
							display: flex;
							justify-content: space-between;
						}
					}
				}

				// 评论列表
				.reviews-box {
					border-bottom: 2rpx solid #f2f3f5;
					border-radius: 8rpx;
					padding: 32rpx;
					background: rgba(242, 242, 242, 1);
					border-bottom: 2rpx solid #f2f3f5;

					.title {
						margin: 0 0 40rpx 0;

						text {

							// white-space: nowrap;
							span {
								white-space: nowrap;
							}
						}
					}

					.reviews-main {
						.nav-search {
							/deep/ .switch-svg {
								width: 82rpx !important;
							}
						}

						.reviews-card {
							margin-top: 32rpx;

							&:not(:last-child) {
								/deep/ .main {
									border-bottom: 2rpx solid #f2f3f5;
								}
							}
						}
					}
				}

				// 推荐列表
				.goods-box {
					.reviews-main {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.product-card-container {
							width: 45%;
						}
					}
				}

				/deep/ .scroll-view-box {
					.title {
						margin: 40rpx 0;

						h2 {
							font-size: 32rpx;
						}
					}

					.uni-scroll-view-content {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.scroll-item {
							margin-right: 40rpx;

							.name {
								color: #1b1d29;
								margin-top: 10rpx;
							}

							.price {
								color: #91909a;
							}
						}
					}
				}

				.store {
					border-bottom: 2rpx solid #f2f3f5;
					border-radius: 8rpx;
					padding: 32rpx;
					background: rgba(242, 242, 242, 1);
					border-bottom: 2rpx solid #f2f3f5;
					margin: 16rpx 0;

					.store-card {
						display: flex;
						justify-content: space-between;
						align-items: center;

						view {
							text {
								font-size: 28rpx;
								color: #1b1d29;
							}
						}
					}
				}

				.guarantee {
					.guarantee-box {
						display: flex;

						.tag-item {
							padding: 0 16rpx;
						}
					}
				}
			}
		}

		// 分享弹出层呢
		.share-pop {
			.share-main {
				padding: 68rpx 46rpx 0;
				max-height: 70vh;

				.othen-way {
					display: flex;

					* {
						&:not(:first-child) {
							margin-left: 40rpx;
						}
					}
				}

				.friends {
					padding-top: 30rpx;

					.user-list-item {
						margin-top: 30rpx;
					}

					.slot-btn {
						margin: 0;
						// margin-right: 14rpx;
						width: 158rpx;
						height: 48rpx;

						&:not(.u-primary-plain-hover) {
							background-color: #fff !important;
							color: #2934d0 !important;
							border-color: #2934d0 !important;
						}

						.u-primary-plain-hover {
							background-color: #2934d0 !important;
						}
					}
				}
			}
		}

		.select-box {
			margin-bottom: 32rpx;

			.box {
				display: flex;
				flex-wrap: wrap;

				.type {
					padding: 20rpx 20rpx;

					margin: 20rpx 20rpx 20rpx 0;

					border-radius: 8rpx;
					font-size: 24rpx;
					position: relative;
					height: 64rpx;
					background: rgba(242, 242, 242, 1);
					color: rgb(182, 182, 182);

					.oss {
						position: absolute;
						top: -12px;
						right: -6px;
						background: rgba(182, 182, 182, 1);
						width: 64rpx;
						text-align: center;
						font-size: 18rpx;
						color: #fff;
						height: 20px;
						line-height: 20px;
						border-radius: 10rpx;
					}
				}

				.optional {
					color: rgb(27, 29, 41);
					background: rgba(242, 242, 242, 1);
				}

				.active {
					color: #fff;
					background: #2934d0;
				}
			}

		}

		// 选择规格弹出层
		.check-specification-pop {
			.check-specification-main {
				padding: 40rpx;

				view {
					h2 {
						font-size: 32rpx;
						color: #000;
						font-weight: 500;
					}
				}

				.select-size {
					margin-top: 32rpx;

					view {
						display: flex;
						margin-top: 20rpx;
						padding-bottom: 36rpx;
						border-bottom: 2rpx solid #f2f3f5;

						.select-size-item {
							width: 80rpx;
							height: 80rpx;
							border: 2rpx solid #dddddd;
							text-align: center;
							line-height: 80rpx;
							border-radius: 50%;
							color: #888888;
							transition: 0.2s;

							&:not(:first-child) {
								margin-left: 30rpx;
							}

							.is-checked {
								background-color: #2934d0;
								border-color: #2934d0;
								color: #fff;
							}
						}
					}
				}

				.select-discount-coupon {
					padding: 38rpx 0 32rpx;
					border-bottom: 2rpx solid #f2f3f5;

					.u-radio-group {
						/deep/ .u-radio {
							width: 100% !important;
							display: flex;
							flex-direction: row-reverse;
							justify-content: space-between;

							&:not(:first-child) {
								margin-top: 20rpx;
							}

							.u-radio__label {
								display: flex;
								align-items: center;

								.image-for-size {
									margin-right: 10rpx;
								}
							}

							.u-radio__icon-wrap {
								.u-icon__icon {
									&::before {
										content: '\e63a';
									}
								}
							}
						}
					}
				}

				.check-number {
					display: flex;
					margin-top: 32rpx;
					justify-content: end;
				}

				uni-button {
					margin-top: 38rpx;
					width: 670rpx;
					height: 120rpx;
					border-radius: 20rpx;
					font-size: 32rpx;
				}
			}
		}

		// 查看评论
		.reviews-pop {
			.reviews-main {
				.container-box {
					padding-bottom: 140rpx;
					display: flex;
					flex-direction: column;
					height: 100%;
				}

				/deep/ .u-subsection {
					height: 68rpx !important;
					border-radius: 34rpx !important;

					.u-item-bg {
						height: 56rpx !important;
						border-radius: 28rpx !important;
						box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1) !important;
					}
				}
			}

			.reviews-list-box {
				flex: auto;
				height: 0;
				overflow: auto;
				padding-top: 26rpx;

				.reviews-card {
					margin: 30rpx 0;

					&:not(:last-child) {
						/deep/ .main {
							border-bottom: 2rpx solid #f2f3f5;
						}
					}
				}
			}
		}

		.title-split {
			margin: 48rpx 0 28rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.titleTxet {
				font-weight: bold;
				font-size: 14px !important;
				padding: 0 12px;
				font-family: PingFangSC-Heavy;
				color: #000 !important;
			}

			view {
				width: 112rpx;
				height: 4rpx;
				border-radius: 3rpx;

				&:first-of-type {
					background: linear-gradient(270deg, rgba(23, 23, 23, 0.2) 1.25%, rgba(23, 23, 23, 0) 101.25%);
				}

				&:last-of-type {
					background: linear-gradient(270deg, rgba(23, 23, 23, 0.2) 1.25%, rgba(23, 23, 23, 0) 101.25%);
				}
			}
		}

		.change-order-address {
			.popup-main {
				padding: 56rpx 40rpx;

				.header {
					padding: 0 10rpx;
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;

					text {
						color: #212121;
						font-weight: 500;
					}
				}

				.check-address {
					margin-top: 80rpx;

					.address-item {
						display: flex;
						margin-bottom: 68rpx;

						.check-text {
							width: 0;
							flex: auto;
							color: #1e2432;

							.user-name {
								font-size: 30rpx;
								line-height: 36rpx;
								font-weight: 500;
							}

							.address {
								margin-top: 6rpx;
								font-size: 26rpx;
								line-height: 40rpx;
							}
						}

						.is-checked::after {
							content: '';
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 70%;
							height: 70%;
							border-radius: 50%;
							background-color: #212121;
						}

						.check-icon {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							border: 4rpx solid #212121;
							margin-right: 28rpx;
							margin-top: 8rpx;
							position: relative;
						}
					}
				}
			}
		}

		.reviews-main-popup {
			padding: 20rpx;

			.reviews-card {
				margin: 30rpx 0;

				&:not(:last-child) {
					/deep/ .main {
						border-bottom: 2rpx solid #f2f3f5;
					}
				}
			}
		}

		.tabs {
			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto 0;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #a5a5a5;
				transition: transform 0.4s;
			}

			.active {
				background: #ffffff;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3b2be4;
			}
		}
	}

	.serveTop {
		font-size: 32rpx;
		color: rgba(23, 23, 23, 1);
		text-align: center;
		margin-bottom: 48rpx;
	}

	.severBox {
		margin-bottom: 48rpx;

		.severTittle {
			display: flex;
			margin-bottom: 16rpx;

			.severName {
				margin-left: 8rpx;
				color: rgba(23, 23, 23, 1);
				font-size: 28rpx;
			}
		}

		.severDetail {
			color: rgba(182, 182, 182, 1);
			font-size: 24rpx;
			margin-left: 40rpx;
		}
	}

	.serverOpen {
		display: flex;
		justify-content: space-between;
	}

	.detailPopup {
		margin: 40rpx;
		position: relative;
		min-height: 1050rpx;
	}

	.footer {
		position: absolute;
		bottom: 40rpx;
		margin-top: 40rpx;
	}

	.productImage2 {
		display: flex;
		align-items: center;

		view {
			margin-right: 16rpx;
		}

		.productImage3 {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.priceOne {
			color: rgba(27, 29, 41, 1);

			font-weight: 500;
			font-size: 36rpx;
		}

		.priceTwo {
			color: rgba(252, 61, 92, 1);

			font-size: 24rpx;
		}
	}

	.severMore {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 32rpx 0;
		background-color: rgb(242, 242, 242);
		border-radius: 8rpx;
		padding: 10rpx 16rpx;

		.severTittle {
			display: flex;
			align-items: center;
			margin-right: 16rpx;

			.severName {
				color: rgba(182, 182, 182, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
			}
		}
	}

	.shopRate {
		display: flex;
		align-items: center;
		margin: 10rpx 0;

		.shopRateName {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 18rpx;
			width: 80rpx;
			height: 38rpx;
			border-radius: 4rpx;
			border: 1rpx solid rgba(189, 188, 199, 1);
			box-sizing: border-box;
			background: rgba(252, 250, 254, 1);
			line-height: 34rpx;
			text-align: center;
		}

		.range {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
		}
	}

	.serveContent {
		width: 80%;

	}

	.customerServiceBox {
		height: 100%;
		padding: 40rpx;
		flex-wrap: wrap;
		color: #fff;
		background: #1b1d29;

		.iconBox {
			width: 120rpx;
			height: 120rpx;
			margin: 20rpx auto;
			/* text-align: center; */
			/* line-height: 100px; */
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2979ff;
			border-radius: 50%;
		}

	}

	.box-border {
		// padding: 40rpx;
		border-radius: 8px;
		background: rgba(242, 242, 242, 1);
		border-radius: 26rpx;
		margin-bottom: 48rpx;

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.rowTitle {
				color: rgba(23, 23, 23, 1);
				font-family: PingFang SC;
				font-weight: 500;
				margin-right: 8rpx;
				font-size: 28rpx;
				width: 150rpx;
			}

			.progress {
				width: 140rpx;
				height: 24rpx;
				border-radius: 32rpx;
				margin: 0 16rpx;
				background: rgba(230, 230, 230, 1);

				.progress-bar {
					height: 24rpx;
					border-radius: 32rpx;
					background: linear-gradient(90deg, rgba(198, 233, 77, 1) 0%, rgba(239, 218, 73, 1) 26.22%, rgba(240, 156, 58, 1) 57.06%, rgba(240, 156, 58, 1) 98.71%, rgba(235, 115, 48, 1) 98.71%);
				}
			}

			.rowRange {
				font-weight: 500;
				font-size: 28rpx;
				margin-right: 8rpx;
				color: rgba(253, 161, 22, 1);
			}

			.rowMes {
				color: rgba(253, 161, 22, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
			}
		}

		.range {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
		}

		.tips {
			color: rgba(182, 182, 182, 1);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 10px;
			padding: 0 0 40rpx;
			margin: 20rpx 0 40rpx;
			border-bottom: 1px solid rgba(182, 182, 182, 1);
		}

	}
</style>